<template>
  <!--  下拉选择 单选-->
  <el-select @change="updateValue"
             v-if="config.viewTypeValue=='7'"
             :value="value"
             style="width: 100%"  size="small"
             placeholder="请选择"
             clearable
             :multiple="false"
             :disabled="config.disabled||false"
  >
    <el-option
      v-for="item in options"
      :key="item[config.valueField] "
      :label="item[config.showField]"
      :value="item[config.valueField]"
    ></el-option>
  </el-select>
  <!--  下拉选择 多选-->
  <el-select @change="updateMultipleValue"  size="small"
             v-else-if="config.viewTypeValue=='8'"
             :value="multipleValue"
             style="width: 100%"
             clearable
             placeholder="请选择"
             :multiple="true"
             :disabled="config.disabled||false"
  >
    <el-option
      v-for="item in options"
      :key="item[config.valueField] "
      :label="item[config.showField]"
      :value="item[config.valueField]"
    ></el-option>
  </el-select>
</template>

<script>
import {deepClone} from "@/utils";
import {postAction} from "@rule/api/rule/manage/instance";

export default {
  name: "config-select",
  props: {
    value: String,
    multipleValue: {
      type: Array,
      default: () => [],
    },
    config: {
      type: Object,
      default: () => {
      },
    },
  },
  data() {
    return {
      options: []
    }
  },
  // computed: {
  //   options: {
  //     get() {
  //       return []
  //     },
  //     set(v) {
  //       this.config['options'] = v
  //     }
  //   },
  // },
  watch: {
    'config.path': {
      immediate: true,
      handler(val) {
        postAction(val, this.config.extraForm || {}).then(
          response => {
            this.$emit('setOptions', response.data);
            this.options = response.data;
          });
      }
    },
  },
  methods: {
    updateValue(value) {
      this.$emit('updateValue', value);
    },
    updateMultipleValue(value) {
      this.$emit('updateMultipleValue', value);
    },
  }
}
</script>

<style scoped>

</style>
